<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item
        label="有无实物:"
        :label-width="formLabelWidth"
        class="el-form-item-block"
        prop="isMaterialObject"
      >
        <el-select
          v-model="form.isMaterialObject"
          placeholder="请选择"
          :disabled="updateDisabled"
          @change="handleChangeIsMaterial"
        >
          <!--          <el-option label="有" value="1" />-->
          <el-option
            v-for="item in isMaterialObjectArray"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="退库类型:"
        :label-width="formLabelWidth"
        class="el-form-item-block"
        prop="refundType"
      >
        <el-select
          v-model="form.refundType"
          placeholder="请选择"
          :popper-append-to-body="false"
          @change="handleChange"
        >
          <!--          <el-option label="可用入库" value="2" />-->
          <!--          <el-option label="可用不入库" value="3" />-->
          <!--          <el-option label="不可用入库" value="4" />-->
          <!--          <el-option label="不可用不入库" value="5" />-->
          <el-option
            v-for="item in refundTypeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="退库数量:"
        :label-width="formLabelWidth"
        class="el-form-item-block el-form-item-block-remark"
        prop="retreatAmount"
      >
        <el-input
          v-model="form.retreatAmount"
          :disabled="amountDisabled || inputDisable"
          autocomplete="off"
        />
        <div v-if="!amountDisabled" class="el-form-item-remark">
          可退库数量:<span>{{ canRetreatAmount }}</span>
        </div>
      </el-form-item>
      <el-form-item
        label="保管人:"
        :label-width="formLabelWidth"
        class="el-form-item-block"
        prop="keeper"
      >
        <el-input
          v-model="form.keeper"
          autocomplete="off"
          :disabled="inputDisabled"
        />
      </el-form-item>
      <el-form-item
        label="保管人联系方式:"
        :label-width="formLabelWidth"
        class="el-form-item-block"
        prop="keeperContact"
      >
        <el-input
          v-model="form.keeperContact"
          maxlength="11"
          autocomplete="off"
          :disabled="inputDisabled"
          @blur="blurEvent"
        />
      </el-form-item>
      <el-form-item
        label="保管人地址:"
        :label-width="formLabelWidth"
        class="el-form-item-block"
        prop="keeperAddress"
      >
        <el-input
          v-model="form.keeperAddress"
          autocomplete="off"
          :disabled="inputDisabled"
        />
      </el-form-item>
      <el-form-item
        label="备注:"
        :label-width="formLabelWidth"
        class="el-form-item-block"
        prop="keeperAddress"
        style="margin-bottom: 60px !important;"
      >
        <el-input
          v-model="form.remark"
          maxlength="60"
          type="textarea"
          :rows="3"
          placeholder="请输入内容"
          resize="none"
          class="pms-textarea"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button
        class="pms-button-primary"
        style="height: 30px"
        @click="submitSave"
      >{{ btnName }}</el-button>
    </div>
  </div>
</template>

<script>
import { getRetreatSpuUnitAccByMaterialCode, cableMateLabelIsCut, queryByMaterialCode } from '@/api/material'
export default {
    name: 'EditRemoveMaterialDialog',
    props: {
        canRetreatAmount: {
            type: [Number, String],
            default: 0
        },
        currentRow: {
            type: [Array, Object],
            default: () => []
        },
        updateRow: {
            type: Object,
            default: () => {
                return {
                    retreatAmount: ''
                }
            }
        },
        type: {
            type: String,
            default: ''
        },
        prjId: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            form: {
                isMaterialObject: '1',
                refundType: '',
                keeper: '',
                keeperContact: '',
                keeperAddress: '',
                retreatAmount: '',
                remark: ''
            },
            formLabelWidth: '120px',
            inputDisabled: false,
            rules: {
                refundType: [
                    {
                        required: true,
                        message: '请选择退库类型',
                        trigger: 'blur'
                    }
                ],
                retreatAmount: [
                    {
                        required: true,
                        message: '请填写退库数量',
                        trigger: 'blur'
                    }
                ],
                keeper: [],
                keeperContact: [],
                keeperAddress: []
            },
            btnName: '保存',
            isMaterialObjectArray: [
                {
                    label: '有',
                    value: '1'
                }
            ],
            refundTypeOption: [
                {
                    label: '可用入库',
                    value: '2'
                },
                {
                    label: '可用不入库',
                    value: '3'
                },
                {
                    label: '不可用入库',
                    value: '4'
                },
                {
                    label: '不可用不入库',
                    value: '5'
                }
            ],
            inputDisable: false,
            showFlag: false
        }
    },
    computed: {
        amountDisabled() {
            return this.type === 'update'
        },
        updateDisabled() {
            if (this.type === 'update') {
                // 先判断为利旧物资，则默认选择有，且不允许修改  其余情况下选择有无两种
                if (['34', '36', '3', '32'].includes(this.updateRow.pmsRetreat)) {
                    this.isMaterialObjectArray = [
                        {
                            label: '有',
                            value: '1'
                        },
                        {
                            label: '无',
                            value: '0'
                        }
                    ]
                    if (this.updateRow.pmsRetreat === '34') {
                        this.refundTypeOption = [
                            {
                                label: '不可用入库',
                                value: '4'
                            },
                            {
                                label: '不可用不入库',
                                value: '5'
                            }
                        ]
                    }
                    return false
                } else {
                    return true
                }
            } else {
                // 申请退库进来，之前只有实物只能选择有，所以要赋值
                return false
            }
        }
    },
    watch: {
        'form.retreatAmount': {
            handler(value) {
                if (+value > this.canRetreatAmount) {
                    setTimeout(() => {
                        this.form.retreatAmount = this.canRetreatAmount
                    }, 300)
                }
            }
        }
    },
   async mounted() {
        await this.getNewSelect()
        console.log(1111, this.currentRow)
        if (this.type) {
            this.btnName = '重新推送仓储'
            this.form.retreatAmount = this.updateRow.retreatAmount
            this.form.remark = this.updateRow.remark
            this.getNewOne()
        } else {
            const data = {
                materialCode: this.currentRow.materialCode,
                osDetailId: this.currentRow.osDetailId,
                prjId: this.prjId
            }
            cableMateLabelIsCut(data).then((res) => {
                this.inputDisable = !res.data
                if (!res.data) {
                    this.form.retreatAmount = this.canRetreatAmount
                }
            })
        }
    },
    methods: {
        async getNewSelect() {
            const { code, data } = await queryByMaterialCode(this.currentRow.materialCode)
            if (+code === 200 && +data === 0) {
                this.showFlag = true
                this.refundTypeOption = [
                    {
                        label: '可用入库',
                        value: '2'
                    },
                    {
                        label: '不可用入库',
                        value: '4'
                    }
                ]
            }
        },
        getNewOne() {
            if (this.updateRow.pmsRetreat === '34') {
                if (this.showFlag) {
                    this.refundTypeOption = [
                        {
                            label: '不可用入库',
                            value: '4'
                        }
                    ]
                    return
                }
                this.refundTypeOption = [
                    {
                        label: '不可用入库',
                        value: '4'
                    },
                    {
                        label: '不可用不入库',
                        value: '5'
                    }
                ]
            }
        },
        // 保管人联系方式正则检验
        blurEvent() {
            const tmp = /(^((\+86)|(86))?(1[3-9])\d{9}$)|(^(0\d{2,3})-?(\d{7,8})$)/
            if (!tmp.test(this.form.keeperContact)) {
                this.form.keeperContact = ''
                this.$message.warning('请输入11位正确格式的联系方式！')
            }
        },
        submitSave() {
            this.$refs.form.validate(async(valid) => {
                if (valid) {
                    const params = {
                        retreatAmount: this.form.retreatAmount,
                        materialCode: this.currentRow.materialCode || this.updateRow.materialCode
                    }
                   const res = await getRetreatSpuUnitAccByMaterialCode(params)
                   if (+res.code === 200) {
                     this.$message.success('操作成功')
                     this.$emit('submitSave', this.form, this.updateRow)
                   }
                }
            })
        },
        handleChangeIsMaterial() {
            this.form.refundType = ''
            if (+this.form.isMaterialObject === 0) {
                this.refundTypeOption = [
                    {
                        label: '不可用不入库',
                        value: '5'
                    }
                ]
            } else {
                this.getChangeIsMaterialOne()
            }
        },
        getChangeIsMaterialOne() {
            if (this.updateRow.pmsRetreat === '34') {
                if (this.showFlag) {
                    this.refundTypeOption = [
                        {
                            label: '不可用入库',
                            value: '4'
                        }
                    ]
                } else {
                    this.refundTypeOption = [
                        {
                            label: '不可用入库',
                            value: '4'
                        },
                        {
                            label: '不可用不入库',
                            value: '5'
                        }
                    ]
                }
            } else {
                if (this.showFlag) {
                    this.refundTypeOption = [
                        {
                            label: '可用入库',
                            value: '2'
                        },
                        {
                            label: '不可用入库',
                            value: '4'
                        }
                    ]
                } else {
                    this.refundTypeOption = [
                        {
                            label: '可用入库',
                            value: '2'
                        },
                        {
                            label: '可用不入库',
                            value: '3'
                        },
                        {
                            label: '不可用入库',
                            value: '4'
                        },
                        {
                            label: '不可用不入库',
                            value: '5'
                        }
                    ]
                }
            }
        },
        handleChange() {
            console.log(this.form, this.currentRow)
            if (+this.form.refundType === 2 || +this.form.refundType === 4) {
                this.inputDisabled = true
                this.form.keeper = ''
                this.rules.keeper = []
                this.rules.keeperContact = []
                this.rules.keeperAddress = []
            } else {
                this.inputDisabled = false
                this.form.keeper = this.currentRow.fieldProjectManager
                this.rules.keeper = [
                    {
                        required: true,
                        message: '请填写保管人',
                        trigger: 'blur'
                    }
                ]
                this.rules.keeperContact = [
                    {
                        required: true,
                        message: '请填写保管人联系方式',
                        trigger: 'blur'
                    }
                ]
                this.rules.keeperAddress = [
                    {
                        required: true,
                        message: '请填写保管人地址',
                        trigger: 'blur'
                    }
                ]
            }
            this.form.keeperContact = ''
            this.form.keeperAddress = ''
        }
    }
}
</script>
<style lang="scss" scoped>
.el-form-item-block {
    display: block !important;
    margin-bottom: 10px !important;
    .el-form-item-remark {
        position: absolute;
        left: 210px;
        bottom: 0px;
        color: #acacac;
    }

    &-remark {
        ::v-deep .el-form-item__content {
            width: 400px;
        }
        ::v-deep .el-input__inner {
            width: 200px;
        }
    }
    ::v-deep .el-form-item__content {
        min-width: 300px;
    }
    ::v-deep .el-form-item__label {
        height: 20px;
        line-height: 20px;
    }
    ::v-deep .el-input__icon {
        line-height: 20px;
    }
    &-long {
        min-width: 80%;
    }
}
 ::v-deep .el-form-item__error {
        display: none;
 }
.is-required {
    ::v-deep .el-form-item__error {
        display: block;
        position: absolute;
        left: 310px !important;
        top: 0px;
        width: 300px;
    }
}

</style>
